<template>
  <div>
    <el-button type="success" @click="submit">批量提交</el-button>
    <el-button type="success" @click="refresh">刷新</el-button>
    <!-- 表单 -->
    <el-table
      ref="multipleTable"
      :data="dispat"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" prop="dispatchId" width="55">
      </el-table-column>
      <el-table-column prop="needId" label="需求单号" width="120">
      </el-table-column>
      <el-table-column prop="orderId" label="订单编号" width="120">
      </el-table-column>
      <el-table-column prop="typeName" label="订单类型" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="tranType" label="运输类型" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="username" label="客户名称" show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="下单时间" width="100">
        <template slot-scope="scope">{{ scope.row.orderTime }}</template>
      </el-table-column>
      <el-table-column prop="route" label="路线" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="goodsName" label="货物类型" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="number" label="总数量" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="weight" label="总重量" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="bulk" label="总体积" show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="操作" width="200" align="center">
         <template slot-scope="scope">
          <!-- 弹出框按钮 -->
          <el-button
            @click="drawer = true,handleEdit1(scope.$index, scope.row)"
            type="primary"
            plain
            size="mini"
            style="margin-left: 16px"
          >
            修改
          </el-button>
          <!-- 驳回按钮 -->
          <el-button
            @click="reject(scope.$index, scope.row)"
            type="primary"
            plain
            size="mini"
            style="margin-left: 16px"
          >
            驳回
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

<!-- 弹出框 -->
    <el-drawer
      title="修改车辆"
      :visible.sync="drawer"
      :direction="direction"
      size="400px"
      :before-close="handleClose"
    >
      <div class="asas">
        <div class="popover">
          <span>承运商</span>
          <el-select v-model="dispatch.carrierName" placeholder="请选择">
            <el-option
              v-for="item in vehicle.tCarrier"
              :key="item.carrierId"
              :label="item.carrierName"
              :value="item.carrierName"
            ></el-option>
          </el-select>
        </div>

        <div class="popover">
          <span>车&nbsp;&nbsp;&nbsp;&nbsp;辆</span>
          <el-select v-model="dispatch.carPlate" placeholder="请选择">
            <el-option
              v-for="item in vehicle.tCar"
              :key="item.carId"
              :label="item.carPlate"
              :value="item.carPlate"
            ></el-option>
          </el-select>
        </div>

        <div class="popover">
          <span>司&nbsp;&nbsp;&nbsp;&nbsp;机</span>
          <el-select v-model="dispatch.driverName" placeholder="请选择">
            <el-option
              v-for="item in vehicle.tDriver"
              :key="item.driverId"
              :label="item.driverName"
              :value="item.driverName"
            ></el-option>
          </el-select>
        </div>

        <el-button type="primary" style="margin-top: 15px" @click="handleEdit"
          >保存</el-button
        >

        <el-button type="primary" style="margin-top: 15px" @click="present"
          >提交</el-button
        >
      </div>
    </el-drawer>



  </div>
</template>

<script>
import Need from "@/view/dispatchs/need";

export default {
  name: "Uncommitted",
  props: ["search", "sta0"],
  data() {
    return {
      /* 分页 */
      currentPage: 1,
      pageSizes: [10, 20, 30],
      pageSize: 10,
      total: 0,

      /* 弹出框 */
      drawer: false,
      direction: "rtl",
      dispatch:{},

      dispatchId:'',

      disp:{
        dispatchId:[],
        orderId:[]
      },

      vehicle: [],
      /* 勾选框条数 */
      multipleSelection: '',
      /* 初始化数据对象 */
      dispat: [],
    };
  },
  components: {
    Need,
  },
  watch: {
    "search.orders": {
      handler() {
        console.log(this.search.orders + "asdhkajsd");
        this.findAll(
          this.currentPage,
          this.pageSize,
          this.search.orders,
          this.search.usernames
        );
      },
    },
    "search.usernames": {
      handler() {
        console.log(this.search.usernames + "asdhkajsd");
        this.findAll(
          this.currentPage,
          this.pageSize,
          this.search.orders,
          this.search.usernames
        );
      },
    },
    sta0: {
      handler() {
        console.log(this.search.usernames + "12121212121");
        this.search.orders = null;
        this.search.usernames = null;
        this.findAll(
          this.currentPage,
          this.pageSize,
          this.search.orders,
          this.search.usernames
        );
      },
    },
  },
  methods: {
    /* 刷新数据 */
    refresh() {
      this.search.orders = null;
      this.search.usernames = null;
      this.findAll(
        this.currentPage,
        this.pageSize,
        this.search.orders,
        this.search.usernames
      );
    },

        /* 弹出框派车 */
    handleEdit2(index,row) {

      this.$http({
        method: "GET",
        url: "http://localhost:8090/tTransport/vehicle",
      }).then((resp) => {
        console.log(resp);
        this.vehicle = resp.data.data.vehicle;
      });
    },


    present(){
      this.drawer = false;
      console.log(this.dispatchId);
      var dispatchId = this.dispatchId;
      this.$http({
        method:"POST",
        url:`http://localhost:8090/tVehicle/${dispatchId}`
      }).then(resp=>{
        console.log(resp);
        this.refresh();
      })

    },

    /* 数据提交:提交单个订单表 */
    handleEdit() {
      this.drawer = false;
      console.log(this.dispatchId);
      this.$http({
        method: "PUT",
        url: `http://localhost:8090/tDispatch`,
        params:{
          carrierName:this.dispatch.carrierName,
          carPlate:this.dispatch.carPlate,
          driverName:this.dispatch.driverName,
          dispatchId:this.dispatchId
        }
      }).then(resp=>{
        console.log(resp);
        this.refresh();
      })

      console.log(this.vehicles);
    },

    /* 修改派车查询 */
    handleEdit1(index,row){
      console.log(row);
     this.dispatchId = row.dispatchId;
     var dispatchId = this.dispatchId;
     this.$http({
      method:"GET",
      url:`http://localhost:8090/tDispatch/${dispatchId}`,
     }).then(resp=>{

      this.dispatch = resp.data.data;
      this.handleEdit2(index,row);
      console.log(resp);
     })

    },

    /* 多选数据赋值 */
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    /* 初始化数据 */
    findAll(currentPage, pageSize, orders, usernames) {
      /* 判断搜索框是否有值 */
      if (this.search.orders != null || this.search.usernames != null) {
        orders = this.search.orders;
        usernames = this.search.usernames;
        console.log(orders + "asd" + usernames);
      }
      /* asiox */
      this.$http({
        method: "GET",
        url: "http://localhost:8090/tDispatch",
        params: {
          currentPage: currentPage,
          pageSize: pageSize,
          orders: orders,
          username: usernames,
        },
      }).then((resp) => {
        console.log(resp);
        this.dispat = resp.data.data.records;
        this.total = resp.data.data.total;
      });
    },


    /* 弹出框关闭 */
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },

    /* 每一页条数改变的方法 */
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.findAll(
        this.currentPage,
        this.pageSize,
        this.search.orders,
        this.search.usernames
      );
    },

    /* 页码改变的方法 */
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.findAll(
        this.currentPage,
        this.pageSize,
        this.search.orders,
        this.search.usernames
      );
    },

        /* 驳回 */
    reject(index,row){
      var orderId = row.orderId;
      var dispatchId = row.dispatchId;
      this.$http({
        method: "DELETE",
        url: `http://localhost:8090/tDispatch`,
        params:{
          orderId:orderId,
          dispatchId:dispatchId
        }
      }).then(resp=>{
        console.log(resp);
        this.refresh();
      })
    },

    /* 数据提交：批量提交订单表 */
    submit() {
      let a = this.currentPage;
      let b = this.pageSize;
      let dispatchId = [];
      let orderId = [];
      if (this.multipleSelection == "") {
        console.log("请选择需要提交的数据");
        alert("请选择需要提交的数据");
      } else {
        for (let i = 0; i < this.multipleSelection.length; i++) {
          let j = this.multipleSelection[i].dispatchId;
          dispatchId.push(j);
        }
        for (let i = 0; i < this.multipleSelection.length; i++) {
          let j = this.multipleSelection[i].orderId;
          orderId.push(j);
        }
        this.$confirm("此操作将提交该订单, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
            console.log(dispatchId);
            console.log(orderId);
            this.disp.dispatchId = dispatchId;
            this.disp.orderId = orderId;

            this.$http({
              method:"DELETE",
              url:`http://localhost:8090/tDispatch/del`,
              data:this.disp
            }).then((resp) => {
              if (a > (this.total - 1) / b && (this.total - 1) % b == 0) {
                this.findAll(a - 1, b,this.search.orders,this.search.usernames);
                console.log(this.total);
                console.log(this.total / b);
                console.log(a);
                console.log(b);
              } else {
                this.findAll(a, b,this.search.orders,this.search.usernames);
              }
              if (resp.data.code == 1) {
                //2. 信息提示
                this.$message({
                  message: "" + resp.data.msg,
                  type: "success",
                });
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消提交",
            });
          });
      }
    },

    // /* 数据提交:提交单个订单表 */
    // handleEdit(index, row) {
    //   console.log(row);
    //   console.log("adsasdasfgqqwredfsafqewfsdfqaerfq");
    //   var needId = row.needId;
    //   let a = this.currentPage;
    //   this.$confirm("此操作将提交该订单, 是否继续?", "提示", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning",
    //   })
    //     .then(() => {
    //       var status = 1;
    //       this.$http({
    //         method: "PUT",
    //         url: `http://localhost:8090/tNeed`,
    //         params: {
    //           needId: needId,
    //           status: status,
    //         },
    //       }).then((resp) => {
    //         console.log(resp.data);
    //         if (resp.data.code === 100000) {
    //           this.$message({
    //             message: resp.data.msg,
    //             type: "success",
    //           });
    //         } else {
    //           this.$message.error(resp.data.msg);
    //         }
    //         if (
    //           a > (this.total - 1) / this.pageSize &&
    //           (this.total - 1) % this.pageSize == 0
    //         ) {
    //           console.log(this.total);
    //           this.findAll(
    //             a - 1,
    //             this.pageSize,
    //             this.search.orders,
    //             this.search.usernames
    //           );
    //         } else {
    //           this.findAll(
    //             a,
    //             this.pageSize,
    //             this.search.orders,
    //             this.search.usernames
    //           );
    //         }
    //       });
    //     })
    //     .catch(() => {
    //       this.$message({
    //         type: "info",
    //         message: "已取消提交",
    //       });
    //     });
    // },
  },
  mounted() {},
  created() {
    /* 初始化数据 */
    this.findAll(1, 10,this.search.orders,this.search.usernames);
  },
};
</script>

<style>
</style>
